<template>
<!-- 关系图 -->
<div class="app-container">
    <div style="width:900px; height:600px;">
      <e-charts ref="situationChart" :chart-option="applyOption" />
      </div>
  </div>
</template>
<script>
import ECharts from '@/views/components/ECharts'

export default {
  components: {
    ECharts
  },
  data () {
    return {
      applyOption: {} // 饼图
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      var size = 80
      var size1 = 50
      this.$nextTick(() => {
        this.applyOption = {
          color: ['#708453', '#1f698f', '#98631d', '#734c3e', '#6b86a2', '#9e2f38', '#a38178', '#a0954b'],
          title: {
            text: '项目单位人员关系图',
            top: 10,
            left: 30,
            textStyle: {
              fontSize: 16,
              color: '#000'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              if (params.data.category !== undefined) {
                return params.data.label
              } else {
                if (params.data.label === undefined) {
                  return '关系:未知'
                } else {
                  return '关系:' + params.data.label
                }
              }
            }
            // formatter: '{b}'
          },
          backgroundColor: '#fff',
          animationDuration: 1000,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              name: '知识体系',
              type: 'graph',
              layout: 'none', // force
              silent: false,
              force: {
                repulsion: 60,
                gravity: 0.1,
                edgeLength: 30,
                layoutAnimation: true
              },
              data: [
                {
                  name: '中国传媒大学',
                  x: 150,
                  y: 250,
                  symbolSize: 150,
                  category: '中国传媒大学',
                  draggable: 'true'
                },
                {
                  name: '经管学部',
                  x: 100,
                  y: 300,
                  symbolSize: size,
                  category: '经管学部',
                  draggable: 'true'
                },
                {
                  name: '商学院',
                  x: 60,
                  y: 350,
                  symbolSize: size1,
                  category: '经管学部',
                  draggable: 'true'
                },
                {
                  x: 100,
                  y: 350,
                  name: '文化发展研究所',
                  symbolSize: size1,
                  category: '经管学部',
                  draggable: 'true'
                },
                {
                  x: 140,
                  y: 350,
                  name: '经济与管理学院',
                  symbolSize: size1,
                  category: '经管学部',
                  draggable: 'true',
                  value: 1
                },
                {
                  x: 80,
                  y: 250,
                  name: '文法学部',
                  symbolSize: size,
                  category: '文法学部',
                  draggable: 'true'
                },
                {
                  x: 30,
                  y: 220,
                  name: '汉语国际教育专业',
                  symbolSize: size1,
                  category: '文法学部',
                  draggable: 'true'
                },
                {
                  x: 30,
                  y: 250,
                  name: '文学院',
                  symbolSize: size1,
                  category: '文法学部',
                  draggable: 'true'
                },
                {
                  x: 30,
                  y: 280,
                  name: '政治与法律学院',
                  symbolSize: size1,
                  category: '文法学部',
                  draggable: 'true'
                },
                {
                  x: 210,
                  y: 300,
                  name: '理工学部',
                  symbolSize: size,
                  category: '理工学部',
                  draggable: 'true'
                },
                {
                  x: 180,
                  y: 350,
                  name: '信息工程学院',
                  symbolSize: size1,
                  category: '理工学部',
                  draggable: 'true'
                },
                {
                  x: 220,
                  y: 350,
                  name: '实验教学中心',
                  symbolSize: size1,
                  category: '理工学部',
                  draggable: 'true'
                },
                {
                  x: 260,
                  y: 350,
                  name: '理学院',
                  symbolSize: size1,
                  category: '理工学部',
                  draggable: 'true'
                },
                {
                  x: 300,
                  y: 350,
                  name: '计算机学院',
                  symbolSize: size1,
                  category: '理工学部',
                  draggable: 'true'
                },
                {
                  x: 230,
                  y: 250,
                  name: '艺术学部',
                  symbolSize: size,
                  category: '艺术学部',
                  draggable: 'true'
                },
                {
                  x: 280,
                  y: 200,
                  name: '戏剧影视学院',
                  symbolSize: size1,
                  category: '艺术学部',
                  draggable: 'true'
                },
                {
                  x: 280,
                  y: 230,
                  name: '艺术教育中心',
                  symbolSize: size1,
                  category: '艺术学部',
                  draggable: 'true'
                },
                {
                  x: 280,
                  y: 260,
                  name: '动画与艺术学院',
                  symbolSize: size1,
                  category: '艺术学部',
                  draggable: 'true'
                },
                {
                  x: 280,
                  y: 290,
                  name: '艺术研究院',
                  symbolSize: size1,
                  category: '艺术学部',
                  draggable: 'true'
                },
                {
                  x: 280,
                  y: 320,
                  name: '音乐与录音艺术学院',
                  symbolSize: size1,
                  category: '艺术学部',
                  draggable: 'true'
                }
              ],
              links: [
                {
                  source: '中国传媒大学',
                  target: '经管学部'
                },
                {
                  source: '中国传媒大学',
                  target: '文法学部'
                },
                {
                  source: '中国传媒大学',
                  target: '理工学部'
                },
                {
                  source: '中国传媒大学',
                  target: '艺术学部'
                },
                {
                  source: '经管学部',
                  target: '商学院'
                },
                {
                  source: '经管学部',
                  target: '经济与管理学院'
                },
                {
                  source: '经管学部',
                  target: '文化发展研究所'
                },
                {
                  source: '文法学部',
                  target: '汉语国际教育专业'
                },
                {
                  source: '文法学部',
                  target: '文学院'
                },
                {
                  source: '文法学部',
                  target: '政治与法律学院'
                },
                {
                  source: '理工学部',
                  target: '信息工程学院'
                },
                {
                  source: '理工学部',
                  target: '实验教学中心'
                },
                {
                  source: '理工学部',
                  target: '理学院'
                },
                {
                  source: '理工学部',
                  target: '计算机学院'
                },
                {
                  source: '艺术学部',
                  target: '戏剧影视学院'
                },
                {
                  source: '艺术学部',
                  target: '艺术教育中心'
                },
                {
                  source: '艺术学部',
                  target: '动画与艺术学院'
                },
                {
                  source: '艺术学部',
                  target: '艺术研究院'
                },
                {
                  source: '艺术学部',
                  target: '音乐与录音艺术学院'
                }
              ],
              categories: [
                {
                  name: '中国传媒大学'
                },
                {
                  name: '经管学部'
                },
                {
                  name: '文法学部'
                },
                {
                  name: '理工学部'
                },
                {
                  name: '艺术学部'
                }
              ],
              roam: false,
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  formatter: '{b}'
                }
              },
              lineStyle: {
                normal: {
                  width: 3,
                  // color: 'source', // 决定边的颜色是与起点相同还是与终点相同
                  curveness: 0,
                  type: 'solid'
                }
              }
            }
          ]
        }
      })
    }
  }

}
</script>
<style scoped>

</style>
